<div *ngIf="!isMobile">
  <div class="image-container" *ngIf="images">
    <div class="row">
      <div class="col-1">
        <div class="thumbnails-vertical-container d-none d-lg-block">
          <button
                  class="thumbnails-thumbnail-button"
                  *ngFor="let image of images">
            <img
                 class="thumbnails-thumbnail img-fluid"
                 [src]="getProductImageUrl(image.small)"
                 alt="Product small image"
                 (mouseover)="onMouseOver(image)" />
          </button>
        </div>
      </div>
      <div class="col-11" *ngIf="selectedImage">
        <img
             itemprop="image"
             [src]="getProductImageUrl(selectedImage.large)"
             alt="Product large image"
             class="thumbnails-selected-image img-fluid" />
      </div>
    </div>
  </div>
</div>
<div *ngIf="isMobile">
  <div *ngIf="images">
    <ngu-carousel
                  #productSlider
                  [inputs]="carouselTileConfig"
                  [dataSource]="images">
      <ngu-item *nguCarouselDef="let image; let i = index" class="bannerStyle">
        <a>
          <img
               [src]="getProductImageUrl(image.thumb)"
               alt=""
               style="display: block; width: 100%;" />
        </a>
      </ngu-item>
      <button NguCarouselPrev class="leftRs d-none"></button>
      <button NguCarouselNext class="rightRs d-none"></button>
      <ul class="ngucarouselPoint" NguCarouselPoint>
        <li
            *ngFor="let idx of productSlider.pointNumbers; let i = index"
            [class.active]="i == productSlider.activePoint"
            (click)="productSlider.moveTo(i)"></li>
      </ul>
    </ngu-carousel>
  </div>
</div>
